<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            font-family: montserrat;
            box-sizing: border-box;
        }

        body{
            min-height: 100vh;
            background-image: linear-gradient(120deg, #3498db, #8e44ad);
        }

        .login-form{
            width: 360px;
            background: #f1f1f1;
            height: 580px;
            padding: 80px 40px;
            border-radius: 10px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .login-form h1{
            text-align: center;
            margin-bottom: 60px;
        }

        .txtb{
            border-bottom: 2px solid #adadad;
            position: relative;
            margin: 30px 0;
        }

        .txtb input{
            font-size: 15px;
            color: #333;
            border: none;
            width: 100%;
            outline: none;
            background: none;
            padding: 0 5px;
            height: 40px;
        }

        .txtb span::before{
            content: attr(data-placeholder);
            position: absolute;
            top: 50%;
            left: 5px;
            color: #adadad;
            transform: translateY(-50%);
            z-index: -1;
            transition: .5s;
        }

        .txtb span::after{
            content: '';
            position: absolute;
            left: 0%;
            top: 100%;
            width: 0%;
            height: 2px;
            background: linear-gradient(120deg, #3498db, #8e44ad);
            transition: .5s;
        }

        .focus + span::before{
            top: -5px;
        }

        .focus + span::after{
            width: 100%;
        }

        .logbtn{
            display: block;
            width: 100%;
            height: 50px;
            border: none;
            background: linear-gradient(120deg, #3498db, #8e44ad, #3498db);
            background-size: 200%;
            color: #fff;
            outline: none;
            cursor: pointer;
            transition: .5s;
        }

        .logbtn:hover{
            background-position: right;
        }

        .bottom-text{
            margin-top: 60px;
            text-align: center;
            font-size: 13px;
        }

    </style>
</head>
<body>

<form action="./login.php" class="login-form" method="post">
    <h1>欢迎登陆</h1>

    <div class="txtb">
        用户名：<input type="text" name="username">
        <span ></span>
    </div>

    <div class="txtb">
        密码：&nbsp;&nbsp;<input type="password" name="password">
        <span ></span>
    </div>

    <div class="txtb">
        验证码：<input type="text" name="vcode">
        <span ></span>
    </div>

    <input type="submit" class="logbtn" value="bt"  name="bt">


</form>

<script type="text/javascript">
    $(".txtb input").on("focus", function(){
        $(this).addClass("focus");
    });

    $(".txtb input").on("blur", function(){
        if($(this).val() == "")
            $(this).removeClass("focus");
    });
</script>

</body>
</html>
